<template>
  <base-breadcrumb class="menuManage-container">
    <a-row :gutter="10" type="flex" class="page-height">
      <!-- 树搜索 -->
      <a-col :span="6">
        <a-card class="page-height-tree">
          <title-name title="系统菜单"></title-name>
          <MenuTree ref="menuTree" @selectNode="handleSelectNode" />
        </a-card>
      </a-col>
      <a-col :span="18" class="page-height-list-wrapper">
        <searchData :searchData="searchArr" @search="handleSearch"></searchData>
        <a-card class="page-height-list">
          <!-- <title-name title="信息列表"></title-name> -->
          <div class="table-operateors mb20">
            <a-button type="primary" @click="handleUpdate('add')" v-btnPermission="'sy_006_add_01'">新增</a-button>
          </div>
          <div class="pub-table-select-count" style="margin: 10px 0">
            <a-icon type="info-circle" theme="twoTone" />
            <span>
              共计：
              <a>{{ statisticsInfo.totalNum || 0 }} 个</a>
            </span>
          </div>
          <list-table
            ref="table"
            :columns="columns"
            :request="loadData"
            :alert="true"
            rowKey="id"
            :showPage="false"
          >
            <template slot="sort" slot-scope="text, record, index">
              <span>{{ index + 1 }}</span>
            </template>
            <template slot="type" slot-scope="text">
              {{ text === '1' ? '菜单' : text === '2' ? '按钮' : '' }}
            </template>
            <template slot="action" slot-scope="text, record">
              <MoreButton>
              <a class="base-btn" @click="handleUpdate('look', record)" v-btnPermission="'sy_006_loo_02'">查看</a>

              <a class="base-btn" @click="handleUpdate('edit', record)" v-btnPermission="'sy_006_edi_03'">编辑</a>

              <a class="base-btn" @click="handleUpdate('delete', record)" v-btnPermission="'sy_006_del_04'">删除</a>
              </MoreButton>
            </template>
          </list-table>
        </a-card>
      </a-col>
    </a-row>
    <UpdateMenuManage
      :visible="visible.update"
      :extraData="curNodeData"
      :initData="childInitData"
      @cancel="visible.update = false"
      @confirm="handleUpdateConfirm"
    />
  </base-breadcrumb>
</template>
<script>
import UpdateMenuManage from './UpdateMenuManage.vue'
import { STable } from '@/components'
import MenuTree from './MenuTree.vue'
import { getResourceList, delResource } from '@/api/system/menuAndAuth.js'
import { packageConfirm } from '@/utils/baseAction.js'

export default {
  name: 'menuManage',
  components: {
    STable,
    UpdateMenuManage,
    MenuTree
  },
  data() {
    return {
      searchArr: [
        {
          name: '名称',
          value: 'nameLike',
          type: 'input'
        },
        {
          name: '编码',
          value: 'codeLike',
          type: 'input'
        }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'sort',
          width: '65px',
          scopedSlots: { customRender: 'sort' }
        },
        {
          title: '名称',
          dataIndex: 'name'
        },
        {
          title: '编码',
          dataIndex: 'code'
        },
        {
          title: '类型',
          dataIndex: 'type',
          width: '100px',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '路径',
          dataIndex: 'value'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ],
      curNodeData: {},
      childInitData: {},
      visible: {
        update: false
      },
      selectedKeys: [], // 选中节点
      selectOptions: {}, // 选中节点对象
      queryParam: {},
      statisticsInfo: {
        totalNum: 0
      }
    }
  },
  methods: {
    handleUpdateConfirm(data) {
      this.visible.update = false
      this.$refs.menuTree.reloadChildren()
      this.handleSearch()
    },
    handleSelectNode(nodeData) {
      this.curNodeData = {
        domainId: nodeData.domainId,
        systemId: nodeData.systemId,
        parentId: nodeData.id,
        code: nodeData.code,
      }
      if (!nodeData.isDomain) {
        this.queryParam.parentId = nodeData.id
        this.handleSearch()
      }
    },
    loadData(parameter) {
      const requestParameters = Object.assign({}, parameter, this.queryParam)
      if (!requestParameters.parentId) {
        return Promise.resolve({
          data: []
        })
      }
      return getResourceList(requestParameters).then(res => {
        res.code = res.status;
        this.statisticsInfo.totalNum = res.data.length;
        return res;
      })
      // const resPromise = getResourceList(requestParameters)
      // resPromise.then((res) => {
      //   this.statisticsInfo.totalNum = res.data && res.data.length
      // })
      // return resPromise
    },
    handleDelete(data) {
      packageConfirm({
        callback: async () => {
          const params = {
            id: data.id
          }
          const res = await delResource(params)
          this.$message.success(res.message || res.data.message)
          this.$refs.menuTree.reloadChildren()
          this.handleSearch()
        }
      })
    },
    handleUpdate(type, data = {}) {
      if (type === 'delete') {
        this.handleDelete(data)
        return
      }
      if (!this.curNodeData.domainId || !this.curNodeData.systemId) {
        this.$message.warning('请选择一个系统或资源树节点')
        return
      }
      this.childInitData = {
        ...data,
        pageType: type
      }
      this.visible.update = true
    },
    handleSearch(val) {
      this.queryParam = {
        ...this.queryParam,
        ...val
      }
      this.$refs.table.refresh(true)
    }
  }
}
</script>
